<template>
  <div>
    <van-nav-bar
      title="地图找房"
      left-text="返回"
      fixed
      left-arrow
      @click-left="$router.back()"
    />
    <!-- <div id="container" style="height: 94vh"></div> -->
    <baidu-map
      class="bm-view"
      :center="currentCity"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
    >
      <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <!-- 缩放 -->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <!-- 标签 -->
      <bm-label
        v-for="item in list"
        :key="item.value"
        :content="item.label + '<br>' + item.count"
        :position="{ lng: item.coord.longitude, lat: item.coord.latitude }"
        :labelStyle="{
          border: '1px #fff solid',
          color: '#fff',
          fontSize: '14px',
          textAlign: 'center',
          background: '#fff',
          width: '66.9px',
          height: '51.9px',
          borderRadius: '50%',
          background: '#1cb676',
          lineHeight: '20px',
          padding: '15px 0 0 0',
        }"
        @click="upData(item.value)"
      />
    </baidu-map>
  </div>
</template>

<script>

import { getAreaHouses, getCityInfoByName } from '@/api/house'
import { getCityToken } from '@/utils/storage'

export default {
  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 11,
      list: [],
      currentCity: ''
    }
  },
  methods: {
    async upData (id) {
      const res = await getAreaHouses(id)
      console.log(res)
      this.list = res.body
      this.zoom = 12
    }
  },
  async created () {
    // 获取当前城市
    this.currentCity = getCityToken()
    //
    const { body } = await getCityInfoByName(getCityToken())
    // const body = await getAreaHouses(id)
    // console.log(body)
    const res = await getAreaHouses(body.value)
    // console.log(res)
    this.list = res.body
  }
}
</script>

<style>
/* #container {
  margin-top: 6vh;
} */
.bm-view {
  margin-top: 6vh;
  width: 100%;
  height: 94vh;
}
</style>
